<template>
	<view class="uno-w-full uno-h-full uno-absolute" style="background: rgba(1, 11, 47, 0.8);top: 0;left: 0;">
		<view class="uno-relative bg-dialog1" style="width: 90%;height: 80%;padding: 20rpx;">
			<view class="uno-absolute" style="top: 12rpx;right: 14rpx;width: 22rpx;height: 22rpx;" @click="handleClose">
				<image src="../../static/images/dialog-close.png" mode="scaleToFill"
					style="width: 100%; height: 100%; vertical-align: top" />
			</view>
			<view v-for="(item, index) in detail.schemeAcupointList" :key="item.id">
				<view v-if="index === activeIndex" class="uno-w-full uno-flex uno-justify-between animation"
					style="height: 88%;padding-top: 10rpx;">
					<view class="uno-h-full uno-overflow-hidden" style="width: 49%;border-radius: 6rpx;"
						@click="handlePreview">
						<image :src="`${baseImgUrl}${item.acupointImage}`" mode="scaleToFill"
							style="width: 100%;height: 250rpx;" />
					</view>
					<view class="uno-h-full" style="width: 48%;overflow-y: auto;">
						<view class="" style="font-size: 15rpx;color: #FFFFFF;">{{ item.acupointName }}</view>
						<view class="" style="font-size: 9rpx;color: #FFFFFF;margin-top: 12rpx;">
							<rich-text :nodes="item.introduction"></rich-text>
							<!-- <tm-html :content="item.introduction" /> -->
						</view>
					</view>
				</view>
			</view>

			<view class="uno-w-full flex-center" style="height: 10%;margin-top: 10rpx;">
				<view v-if="activeIndex !== 0" class="bg uno-leading-36rpx"
					style="width: 97rpx;height: 37rpx;margin-right: 10rpx;color: #FFFFFF;font-size: 10rpx;text-align: center;line-height: 36rpx;"
					@click="activeIndex--">
					上一个
				</view>
				<view v-if="detail.schemeAcupointList.length - 1 != activeIndex" class="bg uno-leading-36rpx"
					style="width: 97rpx;height: 37rpx;color: #FFFFFF;font-size: 10rpx;text-align: center;line-height: 36rpx;"
					@click="activeIndex++">
					下一个
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import {
		VITE_IMAGE_URL,
	} from '../../utils/http/url.js'
	export default {
		data() {
			return {
				baseImgUrl: VITE_IMAGE_URL,
				activeIndex: 0
			}
		},
		props: {
			detail: {
				type: Object,
				default: () => {}
			}
		},
		onLoad() {},
		onShow() {},
		onHide() {},
		onUnload() {},
		methods: {
			handleClose() {
				this.$emit('close');
			},
			handlePreview() {
				const urls = this.detail?.schemeAcupointList.map((item) => `${this.baseImgUrl}${item.acupointImage}`);
				uni.previewImage({
					urls,
					indicator: 'number',
					loop: true,
					current: urls[this.activeIndex],
				});
			}
		},
	}
</script>
<style lang="scss">
	.uno-overflow-hidden {
		overflow: hidden;
	}

	.uno-relative {
		position: relative;
	}

	.uno-absolute {
		position: absolute;
	}

	.uno-w-full {
		width: 100%;
	}

	.uno-h-100vh {
		height: 100vh;
	}

	.uno-h-full {
		height: 100%;
	}

	.uno-block {
		display: block;
	}

	.flex-center {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.uno-items-center {
		align-items: center;
	}

	.uno-flex {
		display: flex;
	}

	.uno-flex-wrap {
		flex-wrap: wrap;
	}

	.uno-justify-between {
		justify-content: space-between;
	}

	.uno-justify-start {
		justify-content: start;
	}

	.uno-mx-auto {
		margin-left: auto;
		margin-right: auto;
	}

	.bg {
		background: url('../../static/images/btn-bg.png');
		background-size: 100% 100%;
	}

	.bg-dialog1 {
		background: url('../../static/images/dialog-bg.png');
		background-size: 100% 100%;
		position: absolute;
		top: 10%;
		left: 5%;
		animation: fadeInUp 0.5s linear;
	}

	@keyframes fadeInUp {
		0% {
			opacity: 0;
			transform: scale(0);
		}

		100% {
			opacity: 1;
			transform: scale(1);
			pointer-events: auto;
		}
	}

	.animation {
		animation: fadeInUp1 0.5s linear;
	}

	@keyframes fadeInUp1 {
		0% {
			opacity: 0;
			transform: translateY(20px);
		}

		100% {
			opacity: 1;
			transform: translateY(0);
		}
	}
</style>